<template>
  <div id="baseSetting">
    <div class="inner">
      <!-- 左边部分 -->
      <div class="innerLeft">
        <h3>基本设置</h3>
        <div class="username">
          <span>用户名</span>
          <el-input
            v-model="admin.username"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="password">
          <span>密码</span>
          <el-input
            v-model="admin.password"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <!-- 提交按钮 -->
        <div class="submit">
          <el-button @click="upadteInfo()" type="primary" plain
            >更新基本信息</el-button
          >
        </div>
      </div>
      <div class="innerRight">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8888/api/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="admin.avatar" :src="admin.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="tip">
          <span>只能上传jpg图片</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { updataAdmin } from "@/api/admin.js";
export default {
  name: "baseSetting",
  data() {
    return {
      admin: {
        password: "",
        avatar: "",
      },
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.admin.avatar = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    upadteInfo: function () {
      if (
        this.admin.username == "" ||
        this.admin.password == "" ||
        this.admin.username == null ||
        this.admin.password == null
      ) {
        this.$message({
          message: "请完善信息",
          type: "warning",
        });
      } else {
        updataAdmin(
          this.admin.id,
          this.admin.password,
          this.admin.avatar,
          this.admin.username
        ).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          } else if (res.code === 401) {
            this.$message({
              message: "用户名已存在",
              type: "warning",
            });
          } else {
            this.$message({
              message: "修改失败",
              type: "error",
            });
          }
        });
      }
    },
  },
  mounted() {
    this.admin = this.$route.query;
  },
};
</script>

<style lang="less" scoped>
#baseSetting {
  .inner {
    margin: 20px 0 0 50px;
    display: flex;
    flex-direction: row;
    .innerLeft {
      display: flex;
      flex-direction: column;
      .username {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        .el-input {
          margin-top: 10px;
        }
      }
      .password {
        margin-top: 20px;
        .el-input {
          margin-top: 10px;
        }
      }
      .submit {
        margin-top: 40px;
      }
    }
    .innerRight {
      margin: 70px 0 0 200px;
      .avatar-uploader .el-upload {
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
      .tip {
        margin-top: 10px;
        width: 178px;
        text-align: center;
      }
    }
  }
}
</style>